<template>
    <div>
      <el-card>
        <div class="card-wapper">
          <div id="container"></div>
          <div id="container1"></div>
        </div>
        <h3 style="margin:20px 0 0;color: #909399;">详情数据</h3>
        <el-table :data="data.tableData" stripe style="width: 100%">
      <el-table-column prop="name" label="住院部"  />
      <el-table-column prop="server" label="本周服务医务数"  />
      <el-table-column prop="money" label="金额"  />
      <el-table-column prop="lastweek" label="上周金额"  />
      <el-table-column prop="month" label="本月金额"  />
      <el-table-column prop="audit" label="审计人员"  />
      <el-table-column prop="chargeperson" label="负责人" />
    </el-table>
      </el-card>
  
    </div>
  </template>
  
  <script setup lang="ts">
  import { Chart } from '@antv/g2';
  import { onMounted, reactive } from 'vue';
  import { infomationcenterrevenueReq } from '@/api/pharmacy/pharmacy.api'
  import { DataView } from '@antv/data-set';
  import { type } from 'os';
  
  const data = reactive({
    columnData: [],
    centerData: [],
    otherData: [],
    tableData:[]
  })
  
  //请求图标的数据
  const getlist1 = async () => {
    const res = await infomationcenterrevenueReq()
    // console.log(res);
    // data.columnData=res.data.weightChart.data
    let arr = res.data.weightChart.data;
    let arr2 = []
    arr.forEach(item => {
      Object.keys(item).forEach(key => {
        if (key === 'product') {
        } else {
          arr2.push({ 'department': key, 'type': item['product'], 'value': item[key] })
        }
      })
      // console.log(arr2);
  
    })
    data.columnData = arr2;
    data.otherData = res.data.departmentChart.otherData;
    let arr3 = res.data.departmentChart.centerData
    arr3.forEach(item => {
      item.type = item.name;
      item.name = ''
      Object.keys(item).forEach(key => {
        if (item[key] == '') delete item[key]
      })
    })
    console.log(arr3);
    console.log(data.otherData);
  
    data.centerData = arr3
    data.tableData=res.data.table
  
  
  }
  onMounted(async () => {
    await getlist1()
    // console.log(data.columnData);
  
    //图标内容1
    const chart = new Chart({
      container: 'container',
      autoFit: true,
  
    });
  
    chart.data(data.columnData);
    chart.scale('value', { nice: true, });
    chart.legend({
  
      position: 'top'
    });
  
    chart
      .interval()
      .position('type*value').color('department')
      .adjust([{
        type: 'dodge',
        marginRatio: 0
      }]);
  
    chart.interaction('legend-highlight');
    chart.render();
  
    //第二个图标
  
    const data2 = [
      { value: 251, name: '子事例一' },
      { value: 1048, name: '子事例二' },
      { value: 610, name: '子事例三' },
      { value: 434, name: '子事例四' },
      { value: 335, name: '子事例五' },
      { value: 250, name: '子事例六' },
    ];
    const data3 = [
      { value: 244, type: '33' },
      { value: 2521, type: 'ss' },
      { value: 2211, type: 'sddf' },
  
    ]
  
    // 通过 DataSet 计算百分比
    const dv = new DataView();
    dv.source(data.centerData).transform({
      type: 'percent',
      field: 'value',
      dimension: 'type',
      as: 'percent',
    });
  
    const chart2 = new Chart({
      container: 'container1',
      autoFit: true,
      height: 500,
      padding: 0
    });
    
    chart2.data(dv.rows);
    chart2.scale({
      percent: {
        formatter: (val) => {
          val = (val * 100).toFixed(2) + '%';
          return val;
        },
      },
    });
    chart2.coordinate('theta', {
      radius: 0.4,
    });
    chart2.tooltip({
      showTitle: false,
      showMarkers: false,
    });
    
    chart2.legend('type',false)        
    chart2.legend('name',{
      position:'top',
      flipPage:true,
      marker:{
        symbol:'square'
      },
      offsetY:0
    })        
    chart2
      .interval()
      .adjust('stack')
      .position('percent')
      .color('type')
      .label('type', {
        offset: -5,
      })
      .tooltip('type*percent', (item, percent) => {
        percent = (percent * 100).toFixed(2) + '%';
        return {
          name: item,
          value: percent,
        };
      })
      .style({
        lineWidth: 1,
        stroke: '#fff',
      });
  
    const outterView = chart2.createView();
    const dv1 = new DataView();
    dv1.source(data.otherData).transform({
      type: 'percent',
      field: 'value',
      dimension: 'name',
      as: 'percent',
    });
  
    outterView.data(dv1.rows);
    outterView.scale({
      percent: {
        formatter: (val) => {
          val = (val * 100).toFixed(2) + '%';
          return val;
        },
      },
    });
   
    outterView.coordinate('theta', {
      innerRadius:0.7 /0.5,
      radius: 0.6 ,
    });
   
    outterView
      .interval()
      .adjust('stack')
      .position('percent')
      .color('name', ['#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#5470c6', '#91cc75'])
      .label('name')
      .tooltip('name*percent', (item, percent) => {
        percent = (percent * 100).toFixed(2) + '%';
        return {
          name: item,
          value: percent,
        };
      })
      .style({
        lineWidth: 1,
        stroke: '#fff',
      });
  
    chart2.interaction('element-highlight');
  
    chart2.render();
  
  
  
  })
  </script>
  
  <style scoped lang="scss">
  .card-wapper {
    display: flex;
    justify-content: space-evenly;
  
    #container {
      width: 40%;
      height: 30vh;
    }
  
    #container1 {
      width: 40%;
      height: 30vh;
    }
  }
  </style>